'use strict';

var React = require('react-native');
var Constants = require('./common/style/constants');
var {
  PixelRatio,
  Navigator,
  ScrollView,
  StyleSheet,
  Text,
  TouchableHighlight,
  TouchableOpacity,
  View,
  Component,
  AppRegistry,
  Platform
} = React;

var ChapterPage = require('./pages/chapter');
var FontAwesome = require('./common/font/fontawesome');

class NavButton extends Component {
  render() {
    return (
      <TouchableHighlight
        style={styles.button}
        underlayColor="#B5B5B5"
        onPress={this.props.onPress}>
        <Text style={styles.buttonText}>{this.props.text}</Text>
      </TouchableHighlight>
    );
  }
}

var NavigationBarRouteMapper = {

  LeftButton: function(route, navigator, index, navState) {
    if (index === 0) {
      return (
            <TouchableOpacity
              style={styles.navBarLeftButton}
              onPress={NavigationBarRouteMapper.onMenuPress}>
              <Text style={[styles.navBarText, styles.navBarButtonText, {fontFamily:'FontAwesome', fontSize:24}]}>
                 {FontAwesome.cog}
              </Text>
            </TouchableOpacity>
      
      );
    }

    var previousRoute = navState.routeStack[index - 1];
    var previousRouteView = Platform.OS === 'ios' ? previousRoute.title : (
              <Text style={{fontFamily:'FontAwesome', fontSize:24}}>
                 {FontAwesome.arrow_left}
              </Text>
              );
    return (
      <TouchableOpacity
        onPress={() => navigator.pop()}
        style={styles.navBarLeftButton}>
        <Text style={[styles.navBarText, styles.navBarButtonText]}>
          {previousRouteView}
        </Text>
      </TouchableOpacity>
    );
  },

  RightButton: function(route, navigator, index, navState) {
    console.log(route);
    return route.homePage ? (
      <TouchableOpacity
        onPress={() => navigator.push(ChapterPage)}
        style={styles.navBarRightButton}>
        <Text style={[styles.navBarText, styles.navBarButtonText, {fontFamily:'FontAwesome', fontSize:24}]}>
                 {FontAwesome.qrcode}
        </Text>
      </TouchableOpacity>
    ) : null;
  },

  Title: function(route, navigator, index, navState) {
    return (
      <View style={{height: Constants.NAVBAR_HEIGHT - Constants.STATUSBAR_HEIGHT, justifyContent:'center'}}>
        <Text style={styles.navBarTitleText}>
          {route.title}
        </Text>
      </View>
    );
  },

};

class AwesomeProject extends Component{
  constructor(){
    super();
    if(Platform.OS === 'ios') React.StatusBarIOS.setStyle('light-content', true);
  }

  homeRender(route, navigator){
    //navigator.push(ChapterPage)
    return (
          <ScrollView contentContainerStyle={styles.scene}>
            {Platform.OS === 'android'?(<React.StatusBar  backgroundColor="#ff8f00" barStyle="light-content" />) : null}
            <Text style={{fontSize:24, margin:16}}>检测商品信息</Text>
            <Text>点击右上角的<Text style={[{fontFamily:'FontAwesome'}]}>{FontAwesome.qrcode}</Text>, 并将摄像头对准商品上的二维码</Text>
          </ScrollView>
    );
  }

  render() {
    var self = this;
    return (
      <Navigator
        debugOverlay={false}
        style={styles.appContainer}
        refs='navigator'
        initialRoute={{title:'TraceM', homePage:true}}
        renderScene={(route, navigator) => {
          if(route.homePage){
            return self.homeRender(route,navigator);
          }
          else{
            return (<route.viewClass navigator={navigator} />);
          }
        }}
        navigationBar={
          <Navigator.NavigationBar
            routeMapper={NavigationBarRouteMapper}
            style={styles.navBar}
          />
        }
      />
    );
  }

};

var styles = React.StyleSheet.create({
  messageText: {
    fontSize: 17,
    fontWeight: '500',
    padding: 15,
    marginTop: 50,
    marginLeft: 15,
  },
  button: {
    backgroundColor: 'white',
    padding: 15,
    borderBottomWidth: 1 / PixelRatio.get(),
    borderBottomColor: '#CDCDCD',
  },
  buttonText: {
    fontSize: 17,
    fontWeight: '500',
  },
  navBar: {
    backgroundColor: '#ff8f00',
  },
  navBarText: {
    fontSize: 16,
  },
  navBarTitleText: {
    color: '#FFF',
    fontWeight: '500',
    fontSize:18,
  },
  navBarLeftButton: {
    paddingLeft: 10,
    height: Constants.NAVBAR_HEIGHT - Constants.STATUSBAR_HEIGHT,
    justifyContent:'center'
  },
  navBarRightButton: {
    paddingRight: 10,
    height: Constants.NAVBAR_HEIGHT - Constants.STATUSBAR_HEIGHT,
    justifyContent:'center'
  },
  navBarButtonText: {
    color: '#FFF',
  },
  scene: {
    flex: 1,
    padding:8,
    backgroundColor: '#FFF',
    marginTop:Constants.NAVBAR_HEIGHT,
    flexDirection:'column',
    justifyContent:'center',
    alignItems:'center'
  },
  menuItem:{
    margin:8, 
    height:70, 
    marginTop:20,
    borderRadius:20,
    borderWidth:1, 
    borderColor:'#ffc107', 
    flexDirection:'row', 
    alignItems:'center', 
    justifyContent:'center'
  },
  menuText:{
    fontSize:24, 
    color:'#ffc107'
  }
});

AppRegistry.registerComponent('TraceM', () => AwesomeProject);